<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>签到抽奖哟</title>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/common.js"></script>
</head>
<body>
<div class="rotate_wrap">
    <img class="bg_img rotate_origin" id="i_bg" src="/img/award/img1.png">
    <img class="cont_img rotate_origin1" id="i_cont" src="/img/award/img2.png">
</div>
<div class="text-center">
    <!-- a:0 粉色 a:45 橙色 a:90 浅蓝 a:135  绿色 a:180 深蓝色 a:225 黄色 a:270 红色 a:315 蓝色-->
    <span><i class="fa fa-circle" aria-hidden="true" style="color: pink"></i>10积分</span>
    <span><i class="fa fa-circle" aria-hidden="true" style="color: #FF6600"></i>20积分</span><br/>
    <span><i class="fa fa-circle" aria-hidden="true" style="color: #E1EBEE"></i>30积分</span>
    <span><i class="fa fa-circle" aria-hidden="true" style="color: #009900"></i>40积分</span><br/>
    <span><i class="fa fa-circle" aria-hidden="true" style="color: #0066FF"></i>50积分</span>
    <span><i class="fa fa-circle" aria-hidden="true" STYLE="color: #FFFF00"></i>60积分</span><br/>
    <span><i class="fa fa-circle" aria-hidden="true" STYLE="color: #FF0000;"></i>70积分</span>
    <span><i class="fa fa-circle" aria-hidden="true" STYLE="color: #9999FF"></i>80积分</span>
</div>
<div class="btn" id="i_btn">开始</div>
<div class="">
    <span class=""></span>
</div>
<script src="/js/jquery/jquery.min.js"></script>
<script src="/js/plugins/dialog/dialog.min.js"></script>
<script type="text/javascript">
    var award = sessionStorage.getItem("award");
    sessionStorage.removeItem("award");
    if (!award) {
        $(document).dialog({
            type: "confirm",
            style: "IOS",
            titleShow: false,
            content: "当前状态不允许抽奖",
            buttons: [{
                name: "跳转到个人页面",
                callback: function () {
                    location.href = "/mine/profiles.html";
                }
            }]
        });
    }
    var result_angle;
    var points;
    // 转盘样式，a：旋转角度，p：概率（1代表100%），t：需要显示的其它信息（文案or分享）

    $.get("/signs/randomnums", function (data) {
        result_angle = [
            {a: 0, p: data[0], t: '获得10积分', points: 10},
            {a: 45, p: data[1], t: '获得20积分', points: 20},
            {a: 90, p: data[2], t: '获得30积分', points: 30},
            {a: 135, p: data[3], t: '获得40积分', points: 40},
            {a: 180, p: data[4], t: '获得50积分', points: 50},
            {a: 225, p: data[5], t: '获得60积分', points: 60},
            {a: 270, p: data[6], t: '获得70积分', points: 70},
            {a: 315, p: data[7], t: '获得80积分', points: 80}];
    })
    var rotate = {
        rotate_angle: 0, //起始位置为0
        flag_click: true, //转盘转动过程中不可再次触发
        calculate_result: function (type, during_time) {//type:0,箭头转动,1,背景转动;during_time:持续时间(s)
            var self = this;
            type = type || 0; // 默认为箭头转动
            during_time = during_time || 1; // 默认为1s

            var rand_num = Math.ceil(Math.random() * 100); // 用来判断的随机数，1-100

            var result_index; // 最终要旋转到哪一块，对应result_angle的下标
            var start_pos = end_pos = 0; // 判断的角度值起始位置和结束位置
            setTimeout(function () {
                for (var i in result_angle) {
                    start_pos = end_pos + 1; // 区块的起始值
                    end_pos = end_pos + 100 * result_angle[i].p; // 区块的结束值

                    if (rand_num >= start_pos && rand_num <= end_pos) { // 如果随机数落在当前区块，那么获取到最终要旋转到哪一块
                        result_index = i;
                        break;
                    }
                }
                var rand_circle = Math.ceil(Math.random() * 8) + 1; // 附加多转几圈，2-3

                self.flag_click = false; // 旋转结束前，不允许再次触发
                if (type == 1) { // 转动盘子
                    self.rotate_angle = self.rotate_angle - rand_circle * 360 - result_angle[result_index].a - self.rotate_angle % 360;
                    $('#i_bg').css({
                        'transform': 'rotate(' + self.rotate_angle + 'deg)',
                        '-ms-transform': 'rotate(' + self.rotate_angle + 'deg)',
                        '-webkit-transform': 'rotate(' + self.rotate_angle + 'deg)',
                        '-moz-transform': 'rotate(' + self.rotate_angle + 'deg)',
                        '-o-transform': 'rotate(' + self.rotate_angle + 'deg)',
                        'transition': 'transform ease-out ' + during_time + 's',
                        '-moz-transition': '-moz-transform ease-out ' + during_time + 's',
                        '-webkit-transition': '-webkit-transform ease-out ' + during_time + 's',
                        '-o-transition': '-o-transform ease-out ' + during_time + 's'
                    });
                } else { // 转动指针
                    self.rotate_angle = self.rotate_angle + rand_circle * 360 + result_angle[result_index].a - self.rotate_angle % 360;
                    $('#i_cont').css({
                        'transform': 'rotate(' + self.rotate_angle + 'deg)',
                        '-ms-transform': 'rotate(' + self.rotate_angle + 'deg)',
                        '-webkit-transform': 'rotate(' + self.rotate_angle + 'deg)',
                        '-moz-transform': 'rotate(' + self.rotate_angle + 'deg)',
                        '-o-transform': 'rotate(' + self.rotate_angle + 'deg)',
                        'transition': 'transform ease-out ' + during_time + 's',
                        '-moz-transition': '-moz-transform ease-out ' + during_time + 's',
                        '-webkit-transition': '-webkit-transform ease-out ' + during_time + 's',
                        '-o-transition': '-o-transform ease-out ' + during_time + 's'
                    });
                }
                // 旋转结束后，允许再次触发
                setTimeout(function () {
                    var user = JSON.parse(sessionStorage.getItem("user"));
                    self.flag_click = true;
                    points = result_angle[result_index].points;
                    $.post("/signs", {userId: user.id, points: points}, function (data) {
                        // 告诉结果
                        $(document).dialog({
                            type: "confirm",
                            style: "IOS",
                            titleShow: false,
                            content: result_angle[result_index].t,
                            buttons: [{
                                name: "回到个人页面",
                                callback: function () {
                                    location.href = "/mine/profiles.html";
                                }
                            }]
                        });
                    })
                }, during_time * 1000);
            }, 10)
        }
    }
    $(document).ready(function () {

        $('#i_btn').click(function () {
            if (rotate.flag_click) { // 旋转结束前，不允许再次触发
                rotate.calculate_result(1, 1);
            }
        });
    });

</script>
</body>
</html>